<template>
  <div class="equityMain">
    <div class="headInfo">
      <img
        :src="userInfo.avatar_url"
        class="avatar"
      />
      <div class="infoBlock">
        <div class="infoItem">
          <div class="title">我的余额</div>
          <div class="con">{{memberInfo.balance}}元</div>
        </div>
        <div class="infoItem">
          <div class="title">刷新职位</div>
          <div class="con">{{memberInfo.refresh_job_times}}次</div>
        </div>
        <div class="infoItem">
          <div class="title">发布职位</div>
          <div class="con">{{memberInfo.publish_job_times}}次</div>
        </div>
        <div class="infoItem">
          <div class="title">免费简历</div>
          <div class="con">{{memberInfo.free_resume_times}}份</div>
        </div>
        <div class="infoItem">
          <div class="title">到期时间</div>
          <div class="con">{{memberInfo.member_time_expire}}</div>
        </div>
      </div>
    </div>
    <div class="vipInfo" v-if="member_price_json.length">
      <div class="blockTitle">会员权益购买</div>
      <div class="infoDetail">
        <div class="item">
          <div class="titlei">刷新职位</div>
          <div class="coni">{{memberInfo.memberConfigInfo.refresh_job_times}}次</div>
        </div>
        <div class="item">
          <div class="titlei">发布职位</div>
          <div class="coni">{{memberInfo.memberConfigInfo.publish_job_times}}次</div>
        </div>
        <div class="item">
          <div class="titlei">免费简历</div>
          <div class="coni">{{memberInfo.memberConfigInfo.free_resume_times}}份</div>
        </div>
      </div>
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="(item,index) in member_price_json" :key="index">
          <div class="vipItem">
            <div class="title">{{item.name}}</div>
            <div class="con">￥{{item.price}}元</div>
            <div class="btn" @click="buyVip(item)">立即购买</div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="moreBlock" v-if="memberMenuCofnigList.length">
      <div class="blockTitle">会员加量包抢购</div>
      <div class="moreInfo">
        <div class="moreItem" v-for="(item,index) in memberMenuCofnigList" :key="index">
          <div class="title">{{item.menu_name}}</div>
          <div class="tipCon">{{item.refresh_job_times ? ('刷新职位/' +item.refresh_job_times+'次'):' '}}</div>
          <div class="tipCon">{{item.publish_job_times ? ('发布职位/' +item.publish_job_times+'次'):' '}}</div>
          <div class="tipCon">{{item.free_resume_times ? ('免费简历/' +item.free_resume_times+'次'):' '}}</div>
          <div class="price">￥{{item.menu_price}}</div>
          <div
            :class="'btn '+(item.isBuy-item.purchase_limit >= 0&&'cannot')"
            @click="buyMore(item)"
          >立即购买</div>
        </div>
      </div>
    </div>
    <PhoneModal :info="phoneModalInfo"></PhoneModal>
  </div>
</template>

<script>
import { MemberList, BuyMember, BuyMemberMenu } from "~/api/allRequest";
import PhoneModal from "~/components/phoneModal/phoneModal";

export default {
  name: "equityMain",
  data() {
    return {
      userInfo: JSON.parse(localStorage.getItem('user')) || {},
      memberInfo: {},
      member_price_json: [],
      memberMenuCofnigList: [],
      phoneModalInfo: {
        title: "权益充值",
        content: "手机支付，操作更便捷，快速到账"
      }
    };
  },
  components: { PhoneModal },
  beforeCreate() {},
  created() {
    this.$store.dispatch("changeTabName", "equityMain");
  },
  beforeMount() {},
  mounted() {
    this.getMemberList();
  },
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroy() {},
  methods: {
    getMemberList() {
      MemberList()
        .then(result => {
          let member_price_json = JSON.parse(
            result.memberConfigInfo.member_price_json
          );
          let temp = [];
          for (let i = 0; i < member_price_json.length; i++) {
            if (member_price_json[i].is_open) {
              temp.push(member_price_json[i]);
            }
          }
          this.member_price_json = temp;
          this.memberInfo = result;
          this.memberMenuCofnigList = result.memberMenuCofnigList;
        })
        .catch(err => {
          console.log(err);
        });
    },
    buyVip(item) {
      let needPrice = item.price;
      let memberInfo = this.memberInfo;
      let balance = Number(memberInfo.balance);
      if (needPrice > balance) {
        this.$confirm(`当前账户余额不足（${balance}元),是否立即充值`)
          .then(data => {
            this.$store.dispatch("changePhoneModal", true);
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        this.$confirm(
          `是否支付${needPrice}元购买此会员，当前账户余额：${balance}元`
        )
          .then(data => {
            BuyMember({ member_price_id: item.id })
              .then(result => {
                this.$message.success("购买成功");
                this.getMemberList();
              })
              .catch(err => {
                console.log(err);
              });
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    buyMore(item) {
      let needPrice = item.menu_price;
      let memberInfo = this.memberInfo;
      let balance = Number(memberInfo.balance);
      if (needPrice > balance) {
        this.$confirm(`当前账户余额不足（${balance}元),是否立即充值`)
          .then(data => {
            this.$message.success("小程序充值");
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        this.$confirm(
          `是否支付${needPrice}元购买该套餐，当前账户余额：${balance}元`
        )
          .then(data => {
            BuyMemberMenu({ menu_config_id: item.menu_config_id })
              .then(result => {
                this.$message.success("购买成功");
                this.getMemberList();
              })
              .catch(err => {
                console.log(err);
              });
          })
          .catch(err => {
            console.log(err);
          });
      }
    }
  }
};
</script>

<style scoped lang="less">
.equityMain {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 30px 0;
  .headInfo {
    width: 55%;
    padding: 30px;
    border-radius: 5px;
    // border: 1px solid #F5F5F5;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 30px 30px 30px;
    background: white;
    .avatar {
      width: 100px;
      height: 100px;
      border-radius: 5px;
    }
    .infoBlock {
      display: flex;
      margin-left: 30px;
      .infoItem {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 20px;
      }
    }
  }
  .blockTitle {
    font-size: 18px;
    font-weight: bold;
  }
  .vipInfo {
    width: 55%;
    padding: 30px;
    border-radius: 5px;
    // border: 1px solid #F5F5F5;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 0px 30px 30px 30px;
    background: white;
    flex-direction: column;
    .infoDetail {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: 10px;
      .item {
        display: flex;
        flex: 1;
        height: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        div {
          font-size: 14px;
        }
      }
    }
    .vipItem {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .title {
        color: white;
        font-size: 18px;
        margin-bottom: 10px;
      }
      .con {
        color: white;
        font-size: 14px;
        margin-bottom: 10px;
      }
      .btn {
        width: 120px;
        height: 40px;
        background: white;
        border-radius: 5px;
        color: #019875;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .moreBlock {
    width: 55%;
    padding: 30px;
    border-radius: 5px;
    // border: 1px solid #F5F5F5;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 0px 30px 30px 30px;
    background: white;
    flex-direction: column;
    .moreInfo {
      width: 100%;
      display: flex;
      flex-flow: wrap;
      .moreItem {
        width: 200px;
        height: 250px;
        border-radius: 5px;
        border: 1px solid#019875;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        margin-left: 30px;
        .title {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 10px;
        }
        .tipCon {
          color: #019875;
          font-size: 14px;
        }
        .price {
          color: red;
          font-size: 14px;
          margin-top: 10px;
          margin-bottom: 20px;
        }
        .btn {
          width: 120px;
          height: 40px;
          border-radius: 5px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          background: #019875;
        }
        .cannot {
          background: gray;
        }
      }
    }
  }
}

.el-carousel {
  width: 100%;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #019875;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #019875;
}
</style>
